<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 150px;
            height: 250px;
        }
        #imglist img.selected{
            border: 5px solid #f00;
            width: 140px;
            height: 240px;
        }
    </style>
</head>
<body>
    <button>append</button>
    <button>appendTo</button>
    <button>prepend</button>

    <button>after</button>
    <button>insertAfter</button>
    <button>before</button>

    <button>wrap</button>
    <button>wrapAll</button>

    <button>replaceWith</button>
    <button>replaceAll</button>

    <button>remove</button>
    <button>empty</button>

    <hr>
    
    <div id="imglist">
        <img src="../imgs/1.jpg">
        <img src="../imgs/2.jpg">
        <img src="../imgs/3.jpg">
        <img src="../imgs/4.jpg">
        <img src="../imgs/5.jpg">
    </div>

    <script>
        $('button').click(function(){
            var img = $('<img src="../imgs/5.jpg">');
            switch ($(this).html()){
                // 在list里面的后面添加
                case 'append': $('#imglist').append(img);break;
                // append 的倒装
                case 'appendTo': img.appendTo('#imglist');break;
                // prepend 在list里面的前面添加
                case 'prepend': $('#imglist').prepend(img);break;
                // 在 list 外面添加
                case 'after': $('#imglist').after(img);break;
                case 'insertAfter': $(img).insertAfter('#imglist');break;
                case 'before': $('#imglist').before(img);break;

                // list 中的img装在li标签里面
                case 'wrap': $('#imglist img').wrap('<li>');break;

                // list 中的所有img装在一个li标签里面
                case 'wrapAll': $('#imglist img').wrapAll('<li>');break;

                // list 中的所有img都换成这个img
                case 'replaceWith': $('#imglist img').replaceWith(img);break;

                // 倒装
                case 'replaceAll': img.replaceAll('#imglist img');break;


                case 'remove': $('#imglist img.selected').remove();break;
                case 'empty': $('#imglist').empty();break;
            }


        })
        // 选中效果, 只允许选一张
        $('#imglist img').click(function(){
            $(this).addClass('selected')
            .siblings('img').removeClass('selected');
        })
    </script>
</body>
</html>